<template>
  <div class="keshangpingce">
    <!-- 客商评测弹框 -->
    <div style="position: relative; height: 100%">
      <div class="mainContent">
        <div class="maindivcontent" style="height: 100%">
          <div
            style="height: 30%; position: relative; width: 97%; margin-left: 1%"
          >
            <div class="viptopleft1">
              <div>
                <p class="fontstyle" id="erjikeshangleiji">
                  {{ ljhzgys || 0 }}
                </p>
                <div class="vipgridhr"></div>
                <p>累计合作供应商</p>
              </div>
              <div>
                <p class="fontstyle" id="erjikeshangvip">{{ hygysnum || 0 }}</p>
                <div class="vipgridhr"></div>
                <p>会员供应商</p>
              </div>
              <div>
                <p class="fontstyle" id="erjikeshangnianji">
                  {{ ndxzhynum || 0 }}
                </p>
                <div class="vipgridhr"></div>
                <p>年度新增会员</p>
              </div>
            </div>
            <div class="viptopright1" style="padding-right: 5%">
              <div>
                <p class="fontstyle" id="erjikeshangshanqu">{{ sqnum || 0 }}</p>
                <div
                  class="vipgridhrright"
                  style="height: 0.05rem; background-color: #182c56"
                ></div>
                <p>山区二十六县供应商</p>
              </div>
              <div>
                <img src="@/assets/rightjiantou.png" style="width: 25px" />
              </div>
              <div>
                <p class="fontstyle" id="erjikeshangzhongbiao">
                  {{ sqtotlje || 0 }}
                </p>
                <div
                  class="vipgridhrright"
                  style="height: 0.05rem; background-color: #182c56"
                ></div>
                <p>中标总金额(亿元)</p>
              </div>
            </div>
          </div>
          <div style="height: 69%; display: flex">
            <div style="width: 50%; height: 100%; position: relative">
              <!-- <div style="position: absolute; bottom: 0%; left: 16%">
                <el-button
                  size="mini"
                  v-debounce
                  style="
                    background-color: rgba(41, 171, 226, 0.8);
                    color: white;
                  "
                  @click="getstateus(0, 2)"
                  >去年</el-button
                >
                <el-button
                  size="mini"
                  v-debounce
                  style="background-color: #182c56; color: white"
                  @click="getstateus(1, 2)"
                  >今年</el-button
                >
              </div> -->
              <div style="height: 90%; position: relative">
                <p style="height: 5%">供应商状态</p>
                <Echart
                  id="statusgys"
                  ref="statusgys"
                  :options="statuslistoption"
                  height="95%"
                  width="100%"
                  style="position: absolute; top: 5%; left: 0"
                ></Echart>
              </div>
            </div>
            <div style="width: 50%; height: 100%; position: relative">
              <!-- <div
                style="position: absolute; bottom: 0%; left: 12%; z-index: 999"
              >
                <el-button
                  size="mini"
                  v-debounce
                  style="
                    background-color: rgba(41, 171, 226, 0.3);
                    color: #29abe2;
                  "
                  @click="getstatusright(0, 2)"
                  >去年</el-button
                >
                <el-button
                  size="mini"
                  v-debounce
                  style="
                    background-color: rgba(247, 147, 30, 0.3);
                    color: #f7931e;
                  "
                  @click="getstatusright(1, 2)"
                  >今年</el-button
                >
              </div> -->
              <Echart
                id="kspctopleidatu"
                ref="kspctopleidatu"
                :options="kspctopleidatuopton"
                height="100%"
                width="100%"
              ></Echart>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Swiper from "swiper/bundle";
import Echart from "@/common/echart";
import * as echarts from "echarts";
import { yearDate, shangnianyearDate } from "@/utils/common";
export default {
  props: {},
  data() {
    return {
      // loading: true,
      // mySwiperhyjjwcgqk: "",
      // tableList: [],
      hygysnum: 0,
      ndxzhynum: 0,
      ljhzgys: 0,
      sqtotlje: 0,
      sqnum: 0,
      kspctopleidatuopton: {},
      statuslist: [],
      statuslistoption: {},
    };
  },
  watch: {},
  computed: {},
  components: { Echart },
  mounted() {
    // 获取列表数据
    this.getvipSupplierNum();
    this.getvipAnnualAdditionNum();
    this.getgetSupplierEvaluate();
    this.getgetmountainSupplier();
    this.gettotalBiddingAmount();
    this.getstateus(1);
    this.getstatusright(1);
  },
  methods: {
    getstatusright(status) {
      // let kspcrightldtarr = {};
      // kspcrightldtarr = JSON.parse(localStorage.getItem("kspcrightldt"));
      // let renderarrx = [];
      // let values = [];
      // if (kspcrightldtarr != null) {
      //   if (kspcrightldtarr.temp > new Date().getTime()) {
      //     let max = Math.max.apply(
      //       Math,
      //       kspcrightldtarr.data.map((i) => {
      //         return i.num;
      //       })
      //     );

      //     kspcrightldtarr.data.map((item) => {
      //       let str = item.categoryname.match(/(\S*)供应商/)[1];
      //       if (
      //         window.devicePixelRatio == 1.5 ||
      //         window.devicePixelRatio == 1.25
      //       ) {
      //         renderarrx.push({
      //           name: str,
      //           max: max + 1000,
      //         });
      //       } else {
      //         renderarrx.push({
      //           name: str,
      //           max: max + 500,
      //         });
      //       }

      //       values.push(item.num);
      //     });
      //     this.renderkspctopleidatuopton(renderarrx, values, status);
      //   } else {
      //     this.getgetSupplierTypeNum(status);
      //   }
      // } else {
        this.getgetSupplierTypeNum(status);
        this.getgetSupplierTypeNum1();
      // }
    },
    getgetSupplierTypeNum(status) {
      let renderarrx = [];
      let values = [];
      APIS.Kspc.getSupplierTypeNum({}).then((res) => {
        res.data.sort((a, b) => b.num - a.num);
        res.data.map((item) => {
          let str = item.categoryname.match(/(\S*)供应商/)[1];
          renderarrx.push({ name: str, max: res.data[0].num + 1500 });
          values.push(item.num);
        });
        var chart = echarts.init(document.getElementById("kspctopleidatu"));
        this.renderkspctopleidatuopton(renderarrx, values, status);
      });
    },
    getstateus(status) {
      // let arr = {};
      // arr = JSON.parse(localStorage.getItem("statusarr"));
      // if (arr != null) {
      //   console.log(arr, "444");
      //   this.statuslist = arr.data;
      //   let xvalue = [];
      //   let yvalue = [];
      //   if (arr.temp > new Date().getTime()) {
      //     arr.data.map((item) => {
      //       xvalue.push(item.name);
      //       yvalue.push(item.num);
      //     });
      //     this.renderstatuslistoption(xvalue, yvalue, status);
      //   } else {
      //     this.getgetSupplierStateNum(status);
      //   }
      // } else {
      //   console.log(arr, "55555");
        this.getgetSupplierStateNum(status);
        this.getgetSupplierStateNum1();
      // }
    },
    format(percentage) {
      return `${percentage}`;
    },
    getgetSupplierStateNum(status) {
      this.statuslist = [];
      let statusarr = [];
      APIS.Kspc.getSupplierStateNum({}).then((res) => {
        res.data.map((item) => {
          if (item.applyname.includes("优质")) {
            statusarr.push({
              name: "优质分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("核心")) {
            statusarr.push({
              name: "核心分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("黑名单")) {
            statusarr.push({ name: "黑名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("黄名单")) {
            statusarr.push({ name: "黄名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("一般分供商")) {
            statusarr.push({
              name: "一般分供商",
              num: item.num,
              sort: item.sort,
            });
          }
        });

        // res.data.map((item) => {
        //   if (item.applyname.includes("待审")) {
        //     statusarr.push({
        //       name: "待审状态",
        //       num: item.num,
        //       sort: item.sort,
        //     });
        //   } else if (item.applyname.includes("备用")) {
        //     statusarr.push({
        //       name: "备用状态",
        //       num: item.num,
        //       sort: item.sort,
        //     });
        //   } else if (item.applyname.includes("优质")) {
        //     statusarr.push({
        //       name: "优质分供商",
        //       num: item.num,
        //       sort: item.sort,
        //     });
        //   } else if (item.applyname.includes("核心")) {
        //     statusarr.push({
        //       name: "核心分供商",
        //       num: item.num,
        //       sort: item.sort,
        //     });
        //   } else if (item.applyname.includes("非生产经营类")) {
        //     statusarr.push({
        //       name: "非生产经营类",
        //       num: item.num,
        //       sort: item.sort,
        //     });
        //   } else if (item.applyname.includes("黑名单")) {
        //     statusarr.push({ name: "黑名单", num: item.num, sort: item.sort });
        //   } else if (item.applyname.includes("黄名单")) {
        //     statusarr.push({ name: "黄名单", num: item.num, sort: item.sort });
        //   }else if(item.applyname.includes("一般分供商")){
        //     statusarr.push({ name: "一般分供商", num: item.num, sort: item.sort });
        //   }
        // });
        statusarr.sort((a, b) => b.sort - a.sort);
        this.statuslist = statusarr;
        let xvalue = [];
        let yvalue = [];
        statusarr.map((item) => {
          xvalue.push(item.name);
          yvalue.push(item.num);
        });
        this.renderstatuslistoption(xvalue, yvalue, status);
      });
    },
    renderstatuslistoption(xvalue, yvalue, status) {
      let itemStyle = {};
      let label = {};
      if (status) {
        itemStyle = { color: "#192C55" };
        label = {
          show: true, // 显示标签
          position: "right",
          fontSize: 16,
          color: "#192C55",
        };
      } else {
        itemStyle = { color: "#29ABE2" };
        label = {
          show: true, // 显示标签
          position: "right",
          fontSize: 16,
          color: "#29ABE2",
        };
      }
      let mychart = echarts.init(document.getElementById("statusgys"));
      let percentnum = "";
      if (window.devicePixelRatio == 1.5) {
        percentnum = "24%";
      } else if (window.devicePixelRatio == 1.25) {
        percentnum = "20%";
      } else {
        percentnum = "16%";
      }

      this.statuslistoption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: (params) => {
            return `${params[0].marker}${params[0].name}:${params[0].value}家`;
          },
        },
        grid: {
          left: percentnum,
          top: "1%",
          right: "6%",
          bottom: "1%",
        },
        xAxis: {
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          type: "value",
        },
        yAxis: {
          type: "category",
          data: xvalue,
          triggerEvent: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisTick: {
            show: true,
            length: 60,
            lineStyle: {
              type: "dashed",
              color: "#e0e6f1",
            },
          },
          axisLabel: {
            textStyle: {
              fontSize: 16,
              color: "black",
            },
          },
        },
        series: [
          {
            name: "供应商状态",
            type: "bar",
            zlevel: 1,
            itemStyle: itemStyle,
            label: label,
            barWidth: 16,
            data: yvalue,
          },
        ],
      };
      mychart.off("click");
      mychart.on("click", (params) => {
        this.openlinknew(params);
      });
      window.addEventListener("resize", function () {
        mychart.resize();
      });
    },
    openlinknew(params) {
      if (params.value == "待审状态") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=wait_approve&searchIsShow=0&_t=240254&_winid=w6340"
        );
      } else if (params.value == "备用状态") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=prepare&searchIsShow=0&_t=638368&_winid=w6340"
        );
      } else if (params.value == "优质分供商") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=highquality&searchIsShow=0&_t=627755&_winid=w6340"
        );
      } else if (params.value == "核心分供商") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=core&_t=702037&_winid=w6340"
        );
      } else if (params.value == "非生产经营类") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=nonproductionoperation&_t=504154&_winid=w6340"
        );
      } else if (params.value == "黑名单") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=9&searchIsShow=0&_t=551252&_winid=w6340"
        );
      } else if (params.value == "黄名单") {
        window.open(
          this.base_url+"/enterprise/sm/supplier/mainlib/main.html?applystatus=yellow&searchIsShow=0&_t=957631&_winid=w6340"
        );
      } else if (params.value == "一般分供商") {
        window.open(
          this.base_url+"/tabs?tabs=%E5%90%88%E6%A0%BC%E5%88%86%E4%BE%9B%E5%95%86%E5%BA%93,/enterprise/sm/supplier/sublibrary/main.html?supptype=all$searchIsShow=0"
        );
      }
    },
    renderkspctopleidatuopton(renderarrx, values, status) {
      let label = {};
      let areaStyle = {};
      if (status) {
        label = {
          show: true,
          paddingRight: 15,
          textStyle: {
            color: "#f7931e",
            fontSize: 12,
          },
          formatter: function (params) {
            return params.value;
          },
        };
        areaStyle = {
          normal: {
            color: "#f7931e",
            shadowBlur: 13,
            shadowColor: "rgba(0,0,0,.2)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 0.4,
          },
        };
      } else {
        label = {
          show: true,
          paddingRight: 15,
          textStyle: {
            color: "rgba(41, 171, 226, 1)",
            fontSize: 12,
          },
          formatter: function (params) {
            return params.value;
          },
        };
        areaStyle = {
          normal: {
            color: "rgba(41, 171, 226, 1)",
            shadowBlur: 13,
            shadowColor: "rgba(41, 171, 226, .2)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 0.4,
          },
        };
      }

      var chart = echarts.init(document.getElementById("kspctopleidatu"));

      this.kspctopleidatuopton = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: function (params) {
            let divhtml = `<span style="font-size:16px;font-weight:800">${params.seriesName}</span><br/>`;
            renderarrx.map((item, index) => {
              divhtml += `<div style="display:flex;justify-content: space-between;">
                <p>${item.name}</p>
                <p">${values[index]}家</p></div>`;
            });
            return divhtml;
          },
        },
        radar: {
          triggerEvent: true,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "lightgray",
              type: "dashed",
            },
          },
          // 环形的颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: [
                "#a3a7d1",
                "lightgray",
                "#lightgray",
                "#lightgray",
                "#lightgray",
              ],
            },
          },
          name: {
            textStyle: {
              color: "black",
              fontSize: 14,
              fontWeight: 600,
              lineHeight: 20,
            },
          },
          indicator: renderarrx,
        },
        series: [
          {
            name: "标的类目下供应商数量分布",
            type: "radar",
            symbol: "circle",
            symbolSize: 0, //设置圆环内各个数据的圆点大小
            label: label,
            areaStyle: areaStyle,
            lineStyle: {
              normal: {
                type: "dashed",
                color: "red",
                width: 0,
              },
            },
            data: [values],
          },
        ],
      };
      chart.off("click");
      chart.on("click", function (params) {
        if (params.componentType === "radar") {
          if (params.name == "物资设备") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001001&applystatus=all"
            );
          } else if (params.name == "劳务分包") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001002&applystatus=all"
            );
          } else if (params.name == "公共服务") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001005&applystatus=all"
            );
          } else if (params.name == "专业分包") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001004&applystatus=all"
            );
          } else if (params.name == "机械租赁") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001003&applystatus=all"
            );
          } else if (params.name == "非生产经营类") {
            window.open(
              this.base_url+"/enterprise/simple/v?_m=sm/supplier/mainlib/list&ispfmeta=1&categorycode=100000001006&applystatus=all"
            );
          }
        }
      });
      window.addEventListener("resize", function () {
        chart.resize();
        });
    },
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      return num;
    },
    //山区二十六县供应商数量
    getgetmountainSupplier() {
      APIS.Kspc.mountainSupplier().then((res) => {
        this.sqnum = res.data;
      });
    },
    //山区二十六县中标总金额
    gettotalBiddingAmount() {
      APIS.Kspc.totalBiddingAmount().then((res) => {
        // this.sqtotlje = (res.data.totalprice / 100000000).toFixed(2);
        this.sqtotlje = this.returnFloat(res.data.totalprice / 100000000);
      });
    },
    getgetSupplierEvaluate() {
      APIS.Kspc.getSupplierEvaluate().then((res) => {
        this.ljhzgys = res.data.total;
      });
    },
    getvipAnnualAdditionNum() {
      APIS.Kspc.vipAnnualAdditionNum().then((res) => {
        this.ndxzhynum = res.data;
      });
    },
    getvipSupplierNum() {
      APIS.Kspc.vipSupplierNum().then((res) => {
        this.hygysnum = res.data;
      });
    },
    getgetSupplierStateNum1() {
      let statusarr = [];
      APIS.Kspc.getSupplierStateNum({}).then((res) => {
        res.data.map((item) => {
          if (item.applyname.includes("优质")) {
            statusarr.push({
              name: "优质分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("核心")) {
            statusarr.push({
              name: "核心分供商",
              num: item.num,
              sort: item.sort,
            });
          } else if (item.applyname.includes("黑名单")) {
            statusarr.push({ name: "黑名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("黄名单")) {
            statusarr.push({ name: "黄名单", num: item.num, sort: item.sort });
          } else if (item.applyname.includes("一般分供商")) {
            statusarr.push({
              name: "一般分供商",
              num: item.num,
              sort: item.sort,
            });
          }
        });
        statusarr.sort((a, b) => b.sort - a.sort);
        const t2 = new Date().getTime() + 10800000;
        let kspcleftobj = { data: statusarr, temp: t2 };
        localStorage.setItem("statusarr", JSON.stringify(kspcleftobj));
      });
    },
    getgetSupplierTypeNum1() {
      let renderarrx = [];
      let values = [];
      APIS.Kspc.getSupplierTypeNum({}).then((res) => {
        res.data.sort((a, b) => b.num - a.num);
        const t = new Date().getTime() + 10800000;
        let kspcrightldtobj = { data: res.data, temp: t };
        localStorage.setItem("kspcrightldt", JSON.stringify(kspcrightldtobj));
        // res.data.map((item) => {
        //   let str = item.categoryname.match(/(\S*)供应商/)[1];
        //   renderarrx.push({ name: str, max: res.data[0].num + 1500 });
        //   values.push(item.num);
        // });
      });
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss">
.keshangpingce {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
}

.textchuli {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.row-item {
  color: #192c55;
}
.row-item:nth-child(2) {
  background-image: linear-gradient(181deg, #fdbe45 6%, #c63228);
  color: transparent;
  -webkit-background-clip: text;
}
.el-progress-bar__outer {
  height: 14px !important;
  border-radius: 0;
}
</style>
